<template>
    <div class="share-1">
        <!-- 分享2 -->
        <div class="zzx-section zzx-section-1">
            <div class="p-part">
                <div class="p-title">HOW？ 这个怎么实现？</div>
            </div>

            <div class="demo-show-part demo-show-part-1">
                <p class="p p-1"
                >Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。</p>
            </div>

            <div class="demo-answer-part demo-answer-part-1" v-if="control1">
                <el-row :gutter="10">
                    <el-col :span="5">
                        <div class="grid-content bg-purple">
                            <p class="fb">:first-letter</p>
                        </div>
                    </el-col>
                    <el-col :span="19">
                        <div class="grid-content bg-purple">
                            <div class="p mb-10" v-for="(item,index) in firstLetter" :key="index">
                                {{item}}
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>

            <div class="p-part">
                <div class="p-title">这个呢?</div>
            </div>
            <div class="demo-show-part demo-show-part-2" >
                <p
                    class="p p-1"
                >Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。</p>
            </div>
             <div class="demo-answer-part demo-answer-part-1" v-if="control1">
                <el-row :gutter="10">
                    <el-col :span="5">
                        <div class="grid-content bg-purple">
                            <p class="fb">:first-line</p>
                        </div>
                    </el-col>
                    <el-col :span="19">
                        <div class="grid-content bg-purple">
                            <div class="p mb-10" v-for="(item,index) in firstLine" :key="index">
                                {{item}}
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>


            <!-- 展示答案区域 -->
            <div class="btn-options">
                <el-button type="primary" @click="show1Fun">{{control11txt}}</el-button>
            </div>
           
        </div>

        <!-- 图片 -->
        <div class="zzx-section zzx-section-2">
            <div class="p-part">
                <div class="p-title">图片显示模式</div>
            </div>
             <div class="demo-show-part demo-show-part-1">
                 <img :src="img1" class="mode"/>
             </div>
              <div class="demo-show-part demo-show-part-2">
                 <img :src="img1" class="mode" />
             </div>
                        
            <div class="demo-answer-part demo-answer-part-1" v-if="showSection2">
                <el-row :gutter="10">
                    <el-col :span="5">
                        <div class="grid-content bg-purple">
                            <p class="fb">img{mix-blend-mode: multiply;}</p>
                        </div>
                    </el-col>
                    <el-col :span="19">
                        <div class="grid-content bg-purple">
                            <div class="p mb-10" v-for="(item,index) in multiplyData" :key="index">
                                {{item}}
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
             <div class="btn-options">
                <el-button type="primary" @click="showSection2Fun">{{showSection2?'收起':'显示'}}</el-button>
            </div>
        </div>

    
        <!-- 文字渐变 -->
        <!-- <div class="zzx-section zzx-section-3">
             <div class="demo-answer-part demo-answer-part-1">
            <p>
                <span>今年，</span>
                材质样样出众。 Apple 迄今最坚固耐用的玻璃面板，由原子级工艺造就的夺目新款金色外观，精密打造的手术级不锈钢边框，以及更胜以往的抗水防尘特性。
            </p>
            </div>
        </div> -->

        <div class="zzx-section zzx-section-4">
            <div class="p-part">
                <div class="p-title">这个呢?</div>
            </div>

            <div class="demo-show-part demo-show-part-1">
                <!-- ::selection{
                    color: #fff;
                    background-color: #6bc30d;
                } -->
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

            </div>
            <div class="demo-answer-part demo-answer-part-1" v-if="showSection4">
                <el-row :gutter="10">
                    <el-col :span="10">
                        <div class="grid-content bg-purple">
                            <p class="fb">
                                ::selection{<br/>
                                    color: #fff;<br/>
                                    background-color: #ec2868;<br/>
                                }
                            </p>
                        </div>
                    </el-col>
                 
                </el-row>
            </div>
            <div class="btn-options">
                <el-button type="primary" @click="showSection4Fun">{{showSection4?'收起':'显示'}}</el-button>
            </div>


        </div>


        <div class="zzx-section zzx-section-5">
            <div class="p-part">
                <div class="p-title">自定义鼠标样式</div>
            </div>

            <div class="demo-show-part demo-show-part-1" >
                <!-- ::selection{
                    color: #fff;
                    background-color: #6bc30d;
                } -->
                我们在DIV CSS布局时候，我们会遇到对对象内鼠标指针光标进行控制，比如鼠标经过指针变为手指形状等样式，接下来我们介绍鼠标指针样式cursor控制。系统默认鼠标指针样式外，可以通过CSS设置图片为鼠标指针，常见有些网站鼠标指针是各种各样小图片样式，当然这个是通过css cursor设置鼠标样式。
            </div>
            <div class="demo-answer-part demo-answer-part-1" v-if="showSection5">
                 <el-row :gutter="10">
                    <el-col :span="5">
                        <div class="grid-content bg-purple">
                            <p class="fb">
                                box:{<br/>cursor <br/>url(path),auto <br/>}
                            </p>
                        </div>
                    </el-col>
                    <el-col :span="19">
                        <div class="grid-content bg-purple">
                            <!-- <div class="p mb-10" v-for="(item,index) in firstLine" :key="index">
                                {{item}}
                            </div> -->
                            <p class="p mb-10">

                                css cursor url用法格式：css:{cursor:url('图标路径'),auto;} //IE,FF,chrome浏览器都可以
                            </p>

                            <p class="p mb-10">

                                实例代码：html{cursor: url("http://ued.taobao.com/blog/wp-content/themes/taobaoued/images/cursor.ico"),auto;}
                            </p>

                            <p class="p mb-10">

                                解析：前面的url是自定义鼠标图标路径，第2个参数auto是css标准的cursor样式，可换成其它属性(如pointer/default等)！
                            </p>

                            <p class="p mb-10">

                                （注释：w3school推荐第2个参数必须定义一种普通的光标，以防URL 定义的可用光标使可备用！另外IE下面可以省略第2个参数）
                            </p>

                            <p class="p mb-10">
                                图标的格式：
                            </p>
                            <p class="p mb-10">


                                IE支持cur,ani,ico这三种格式，FF支持
                                <el-tag type="warning">bmp</el-tag>
                                <el-tag type="warning">gif</el-tag>
                                <el-tag type="warning">jpg</el-tag>
                                <el-tag type="warning">ico</el-tag>
                                <el-tag type="danger">cur</el-tag>
                                这几种格式，不支持ani格式，也不支持gif动画格式，因此来说一般将url引用的图片存为ico或cur格式比较好！
                            </p>

                            <p class="p mb-10">


                                图标的大小：
                            </p>

                            <p class="p mb-10">

                                鼠标图片的尺寸推荐尺寸是 <el-tag>32*32</el-tag>，否则可能会导致图标大小不一致的问题！


                            </p>

                        </div>
                    </el-col>
                </el-row>
            </div>
             <div class="btn-options">
                <el-button type="primary" @click="showSection5Fun">{{showSection5?'收起':'显示'}}</el-button>
            </div>

        </div>

        <div class="zzx-section zzx-section-6">
             <div class="p-part">
                <div class="p-title">优先级的挑战</div>
            </div>
            <div class="demo-show-part">
                <img :src="cssimg"/>

            </div>
            <div class="demo-show-part demo-show-part-1">
                <div class="style">
                   <el-tag>#A</el-tag>{<br/>
                    <br/>
                        background-color:orange;<br/>
                        <br/>
                    }<br/>
                    <br/>
                    <el-tag>.a.b.c.d.e.f.g.h</el-tag>{<br/>
                    <br/>
                        background-color:red;<br/>
                        <br/>
                    }<br/>
                    <br/>
                    <br/>

                </div>
                <div class="code-p" v-text="code1">

                </div>
                <div v-if="showSection6" style="background-color:orange;padding:6px;color:white;border-radius:4px;">
                    我是一段文本，我拥有10个类名,和一个 id
                </div>
               
            </div>

              <div class="demo-show-part demo-show-part-2">
                <div class="style">
                    <el-tag>#A</el-tag> {<br/>
                    <br/>
                        background-color:orange;<br/>
                        <br/>
                    }<br/>
                    <br/>
                    <br/>
                    <el-tag>.a.b.c.d.e.f.g.h.i.j.k</el-tag>{<br/>
                    <br/>
                        background-color:blue;<br/>
                        <br/>
                    }<br/>

                </div>
                <div class="code-p" v-text="code1">

                </div>
                <div v-if="showSection6" style="background-color:orange;padding:6px;color:white;border-radius:4px;">
                    我是一段文本，我拥有10个类名,和一个 id
                </div>
               
            </div>

            <div class="tips" v-if="showSection6">
                <p class="mb-10">
                    <el-tag style="font-size:15px;" effect="dark" type="info">!important 表示强制应用该样式，例如：button{ width: 150px !important;}，与以上的选择器相遇时，强制使用此样式；</el-tag>
                    </p>
                <p class="mb-10">
                    <el-tag style="font-size:15px;" effect="dark" type="info">如果比较后权重相同，那么后者覆盖前者，后渲染的胜出；</el-tag>
                    </p>
                <p class="mb-10">
                    <el-tag style="font-size:15px;" effect="dark" type="info">内联样式  > id选择器样式 > 类选择器样式 > 元素选择器样式；</el-tag>
                    </p>
                <p class="mb-10">
                    <el-tag style="font-size:15px;" effect="dark" type="info">CSS选择器的使用，应该尽量避免使用 !important 和 内联样式；id通常也是与class区分开使用，前者多用于JS中的结点定位，后者多用于CSS选择器。</el-tag>
                    </p>
                <p class="mb-10">
                    <el-tag style="font-size:15px;" effect="dark" type="info">重中之重，1000/100/10/1这种权值系数的比较方式只是便于理解，真实情况下10个class并不能逆转1个id</el-tag>
                    </p>
            </div>

            <!-- 展示答案区域 -->
            <div class="btn-options">
                <el-button type="primary" @click="showSection6Fun">{{showSection6?'收起结果':'显示结果'}}</el-button>
            </div>


        </div>

           <div class="zzx-section zzx-section-8">
             <div class="p-part">
                <div class="p-title">::after ,::before 里content:" "  可不可以传值？</div>
            </div>
            <div class="demo-show-part">
                <div class="box1" data-tipval="动态填充内容">
                    实体文本
                </div>
            </div>

            <div class="demo-answer-part demo-answer-part-1" style="font-size:18px;" v-if="showSection8">
                <h1>可以：</h1>
                <p class="code mb-10">{{s8v}}</p>

                 .box::after{<br/>
                 <br/>
                        width: 150px;<br/>
                        <br/>
                        background: #350b6e;<br/>
                        <br/>
                        <el-tag style="font-size:22px;">content:attr(data-tipval);</el-tag><br/>
                        <br/>
                        position: absolute;<br/>
                        <br/>
                        color: white;<br/>
                        <br/>
                        left: 10px;<br/>
                        <br/>
                        top: 40px;<br/>
                        <br/>
                        font-size: 20px;<br/>
                        <br/>
                    }<br/>
            </div>

               <!-- 展示答案区域 -->
                <div class="btn-options" style="text-align:center">
                    <el-button type="primary" @click="showSection8Fun">{{showSection8?'收起':'显示code'}}</el-button>
                </div>




        </div> 
        

        <div class="zzx-section zzx-section-7">
            <div class="bg-fix" :style="bgstyle1">

            </div>
            <div class="demo-show-part" style="background:black;padding:20px;">
                <div class="p-part">
                    <div class="p-title" style="color:white;text-align:center;font-size:48px;">华为，未来已来</div>
                </div>

                <div class="x x2"  style="width:420px;margin:0 auto;margin-bottom:40px;">
                    <span>超视网膜显示屏。</span> 
                    <p class="pp inl">
                        两款大作一起登场 它们经过精心定制，是 华为 色彩精准度最高的 OLED 显示屏，支持 HDR 显示，并能呈现真实深邃的黑色。其中，华为 XS Max 更拥有 华为 迄今最大的显示屏。
                        进一步了解显示屏
                        全面屏，全然新视野。
                        华为 迄今最坚固耐用的玻璃面板，由原子级工艺造就的夺目新款金色外观，精密打造的手术级不锈钢边框，以及更胜以往的抗水防尘特性2。
                    </p>
                </div>

                <div class="demo-answer-part demo-answer-part-1" v-if="showSection7">
                    <div class="csss">
                        .p{</br>
                            background:-webkit-gradient(linear,30% 20%,80% 80%,from(#088df3),to(#6a38ec));</br>
                            -webkit-background-clip:text;</br>
                            -webkit-text-fill-color:transparent;</br>
                        }</br>

                    </div>

                    <p class="mb-10" style="color:white">background-clip 的作用就是设置元素的背景（背景图片或颜色）的填充规则。</p>
                    <p class="mb-10" style="color:white">当然现在只有 chrome 支持，所以通常想使用它，需要 -webkit-background-clip:text;。</p>
                    <p class="mb-10" style="color:white">以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉</p>

                    <p class="mb-10" style="color:white">-webkit-text-fill-color</p>
                    <p class="mb-10" style="color:white">若同时设置 <' text-fill-color '> 和 <' color '>，<' text-fill-color '> 定义的颜色将覆盖 <' color '> 属性；</p>
                    <p class="mb-10" style="color:white">text-fill-color是CSS3中的属性，表示文字颜色填充，实现的效果基本上与color一样，目前仅webkit核心的浏览器下支持此属性，与之类似的还有一个属性就是text-stroke表示文本描边，本文主要展示text-fill-color的应用，text-stroke暂时扔在一边。从某种程度上讲text-fill-color与color基本上的作用是一样的，如果同时设置color与text-fill-color属性，显然是颜色填充覆盖本身的颜色，也就是文字显示text-fill-color设置的颜色（当然在浏览器支持text-fill-color属性的情况下）。虽然说，text-fill-color≈color，但是毕竟还是有差别的，就表现效果上来讲，text-fill-color还支持一个transparent属性，也就是透明填充。而这一属性可以实现一些精湛的UI表现，例如
                        <el-tag @click="showSection72Fun">文字遮罩</el-tag>
                    </p>



                </div>


               <div class="demo" v-if="showSection72">
                   <p class="p1 p">少女的祈祷-杨千嬅 词：林夕</p>
               </div>



                 <!-- 展示答案区域 -->
                <div class="btn-options" style="text-align:center">
                    <el-button type="primary" @click="showSection7Fun">{{showSection7?'收起':'显示code'}}</el-button>
                </div>

                    
            </div>
        </div>

     



    </div>
</template>

<script>
export default {
  name: "share2",
  methods:{
      show1Fun(){
          this.control1 = !this.control1;
          if(this.control1){
            this.control11txt = '收起';
          }else{
            this.control11txt = '显示code';
          }
      },
       showSection2Fun(){
          this.showSection2 = !this.showSection2;
      },
      showSection5Fun(){
          this.showSection5 = !this.showSection5;
      },

      showSection6Fun(){
          this.showSection6 = !this.showSection6;
      },
      showSection7Fun(){
          this.showSection7 = !this.showSection7;
      },
       showSection4Fun(){
          this.showSection4 = !this.showSection4;
      },
      showSection72Fun(){
          this.showSection72 = !this.showSection72;
      },
      showSection8Fun(){
          this.showSection8 = !this.showSection8;
      }
  },
  data() {
    return {
        img1:require('../../images/1.jpg'),
        cssimg:require('../../images/12.png'),
        bg1:require('../../images/11.jpg'),
        bgstyle1:'height:300px;background:url(' + require("../../images/11.jpg")+');background-attachment:fixed',

        control1:false,
        control11txt:'显示code',
        showSection2:false,
        showSection5:false,
        showSection4:false,
        showSection6:false,
        showSection7:false,
        showSection8:false,
        showSection72:false,
        s8v:'<div class="box" data-tipval="动态填充内容"></box>',
        firstLetter:[
            ':first-letter 伪元素向文本的第一个字母添加特殊样式',
           'font 属性',
           ' color 属性',
           ' background 属性',
           ' margin 属性',
           ' padding 属性',
           ' border 属性',
           ' text-decoration',
           ' vertical-align (仅当 \'float\' 为 \'none\' 时)',
           ' text-transform',
           ' line-height',
           ' float',
           ' clear '
        ],
        firstLine:[
            ':first-line 伪元素向文本的首行添加特殊样式.',
            '这个伪元素用于设置元素中的第一行文本的样式，而不论该行出现多少单词',
            'font 属性',
            'color 属性',
            'background 属性',
            'word-spacing',
            'letter-spacing',
            'text-decoration',
            'vertical-align',
            'text-transform',
            'line-height',
            'clear'
        ],
        multiplyData:[
            `在CSS3混合模式中，目前仅有16种：normal，multiply,screen,overlay,
            darken,lighten,color-dodge,color-burn,hard-light,soft-light,
            difference,exclusion,hue,saturation,color,luminosity。
            其中每一种混合模式都有其自的计算模式`,
        ],
        code1:'<p id="A" class="a b c d e f g h i j k"> 我是一段文本，我拥有10个类名,和一个 id </p>',
    };
  }
};

</script>

<style>    

.zzx-section-3 .demo-answer-part-1>p{
    font-size: 60px;
    text-align: center;
    font-weight: bold;
    background: url(https://images.pexels.com/photos/1819650/pexels-photo-1819650.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260) repeat center center;
    background-size:cover;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}
.share-1 {
  /* background: red; */
  width: 100%;
  padding: 10px;
}

.demo-show-part-1 .p-1:first-letter {
  color: red;
  font-size: 3em;
  font-weight: bold;
}




.demo-show-part-2 .p-1:first-line {
  color: red;
  font-size: 3em;
  font-weight: bold;
}


.zzx-section-2 .demo-show-part-1{
    background:#eee;
}
.zzx-section-2 .demo-show-part-2{
    background:#eee;
}
.zzx-section-2 .mode{
    width: 250px;
}
.zzx-section-2 .demo-show-part-2>img{
    mix-blend-mode: multiply;

}

.zzx-section-4 .demo-show-part-1::selection{
    color: #fff;
    background-color: #ec2868;
}


.zzx-section-5 {
    /* cursor: url('../../images/1.cur') default; */
    cursor: url(https://cdn.jsdelivr.net/gh/moezx/cdn@3.1.9/img/Sakura/cursor/normal.cur),auto;
    /* cursor: url(./images/normal.cur),auto; */
}
.zzx-section-4~div *::selection{
    background: #0ea51c;
    color: white;
}

.code-p{
    margin-bottom: 20px;
}

.zzx-section-7 .x{
    font-size:40px;
    font-weight: bold;

}

.zzx-section-7 .x span{
    color: white !important;
}


.zzx-section-7 .x1 .pp{
    background:-webkit-gradient(linear,30% 20%,80% 80%,from(#350b6e),to(#78501c));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}
.zzx-section-7 .x2 .pp{
     background:-webkit-gradient(linear,30% 20%,80% 80%,from(#088df3),to(#6a38ec));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}


.csss{
    background:-webkit-gradient(linear,30% 20%,80% 80%,from(#088df3),to(#6a38ec));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    font-size: 20px;
}
.zzx-section-7 .demo-answer-part{
    width:50%;
    margin: 0 auto;
}


.zzx-section-7 .demo p{
    width: 800px;
    margin: 0 auto;
     height: 78px;
     line-height: 78px;
     font-size: 40px;
     font-family: '微软雅黑';
     font-weight: bold;
    -webkit-text-stroke: 1px white;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-image:url('../../images/bg.jpg');
     background-repeat:no-repeat;
     background-position: -800px 0;
     -webkit-animation:loop 5s linear infinite;  
     text-align: center;

}

@-webkit-keyframes loop{
     0%{background-position: -800px 0;}
     100%{background-position: -0 0;}
}


/* 
.zzx-section-7 .demo p::after{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 400px;
    background: red;
} */


.zzx-section-8 .demo-show-part .box1{
    position: relative;
    width:250px;
    height: 250px;
    color: white;
    background: red;
}
.zzx-section-8 .demo-show-part .box1::after{
    width: 150px;
    background: #350b6e;
    content:attr(data-tipval);
    position: absolute;
    color: white;
    left: 10px;
    top: 40px;
    font-size: 20px;
}
</style>

